<template>
  <div>
    <div class="pieDiv">饼图数据管理</div>
    <el-table :data="PieData" border style="width: 100%;margin: 0 auto; " resizable>
      <el-table-column fixed prop="id" label="id" width="100" align="center"></el-table-column>
      <el-table-column prop="name" label="动漫名" width="200"></el-table-column>
      <el-table-column prop="value" label="喜欢人数" width="100" align="center"></el-table-column>
      <el-table-column prop="context" label="简介" width="540" show-overflow-tooltip></el-table-column>
      <el-table-column prop="works" label="作品集" width="400" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="barDiv">柱形图数据管理</div>
    <el-table :data="sources" border style="width: 100%;margin: 0 auto; " resizable>
      <el-table-column fixed prop="id" label="id" width="100" align="center"></el-table-column>
      <el-table-column prop="product" label="来源 and 去处" width="200"></el-table-column>
      <el-table-column prop="2021" label="2021年" width="300" align="center"></el-table-column>
      <el-table-column prop="2022" label="2022年" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column prop="2023" label="2023年" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick2(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="动漫" :visible.sync="dialogFormVisible">
      <el-form :model="PieRow" ref="PieFrom">
        <el-form-item label="动漫名" :label-width="formLabelWidth">
          <el-input v-model="PieRow.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作品简介" :label-width="formLabelWidth">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="PieRow.context">
          </el-input>
        </el-form-item>
        <el-form-item label="作品集" :label-width="formLabelWidth">
          <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入内容" v-model="PieRow.works">
          </el-input>
        </el-form-item>
        <el-form-item label="订阅人数" :label-width="formLabelWidth">
          <el-input v-model="PieRow.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcancel">取 消</el-button>
        <el-button type="primary" @click="dialoconfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="2023年微信消费" :visible.sync="dialogFormVisible2">
      <el-form :model="BarRow" ref="PieFrom2">
        <el-form-item :label="'2023年 ' + BarRow.product" :label-width="formLabelWidth">
          <el-input v-model="BarRow[2023]" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcancel2">取 消</el-button>
        <el-button type="primary" @click="dialoconfirm2">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      dialogFormVisible2: false,

      // 表格数据
      PieData: [],
      PieRow: {},
      sources: [],
      BarRow: {}
    }
  },
  methods: {
    handleClick(row) {
      this.dialogFormVisible = true
      this.PieRow = row
    },
    handleClick2(row) {
      this.dialogFormVisible2 = true
      this.BarRow = row
    },
    // Pie的取消弹出框
    dialogcancel() {
      this.dialogFormVisible = false
      this.axiosPie()
    },
    // Pie的确定弹出框
    dialoconfirm() {
      this.dialogFormVisible = false
      // 修改饼图数据
      this.$refs.PieFrom.validate(data => {
        if (data) {
          axios({
            url: 'http://localhost:3000/PieData/' + this.PieRow.id,
            method: 'PATCH',
            data: {
              name: this.PieRow.name,
              value: this.PieRow.value,
              context: this.PieRow.context,
              works: this.PieRow.works
            }
          })
            .then(result => {
              console.log(result)
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },
    // Bar的取消弹出框
    dialogcancel2() {
      this.dialogFormVisible2 = false
      // this.axiosPie()
    },
    dialoconfirm2() {
      this.dialogFormVisible2 = false
      // 修改饼图数据
      this.$refs.PieFrom2.validate(data => {
        if (data) {
          axios({
            url: 'http://localhost:3000/BarData/' + this.BarRow.id,
            method: 'PATCH',
            data: {
              [2023]: Number(this.BarRow[2023])
            }
          })
            .then(result => {
              console.log(result)
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },

    axiosPie() {
      axios({
        url: 'http://localhost:3000/PieData',
        method: 'GET'
      }).then(response => {
        for (let index = 0; index < response.data.length; index++) {
          this.PieData.splice(index, 1, response.data[index])
        }
      })
    },
    axiosBar() {
      axios({
        url: 'http://localhost:3000/BarData',
        method: 'GET'
      }).then(response => {
        // console.log(response.data[0])
        for (let i = 0; i < response.data.length; i++) {
          this.sources.splice(i, 1, response.data[i])
        }
      })
    }
  },
  mounted() {
    this.axiosPie()
    this.axiosBar()
  }
}
</script>

<style lang="less" scoped>
.pieDiv {
  font-size: 18px;
  margin: 5px;
}

.barDiv {
  font-size: 18px;
  margin: 5px;
  margin-top: 20px;
}
</style>